<template>
    <div class="hp100">
        <Tabs :value="currentTab" @on-click="changeTab" class="environ-tab">
            <TabPane v-for="(tab, key) in tabs" :key="key" :label="tab.label" :name="key">
                <component
                    style="padding: 0 16px; height: calc(100% - 86px)"
                    :is="tabs[currentTab].component"
                    v-if="key === currentTab"
                    :projectId="projectId"
                    :sceneId="sceneId"
                    taskMode="preset"
                    :disabledAllBtn="disabledAllBtn"
                    :disabledFun="(data) => data.creator !== USER_ID && !isRootDesigner"
                ></component>
            </TabPane>
            <div slot="extra">
                <slot></slot>
            </div>
        </Tabs>
    </div>
</template>
<script>
// import LinkCheck from './linkCheck.vue'
import Protocol from './protocol.vue'
// import Vmcmd from './vmcmd.vue'
import qgawrite from '@/view/drill_compete/page/yj/task/qgawrite.vue';
import Vmcmd from '@/view/drill_compete/page/yj/task/vmcmd.vue';
// import TrafficRetrieval from '../../traffic/trafficRetrieval.vue';
import { mapState } from 'vuex'
export default {
    name: 'Traffic',
    props: {
        'projectId':{
            type:String,
            default:''
        },
        'sceneId':{
            type:String,
            default:''
        },
        disabledAllBtn:{
            type:Boolean,
            default:false
        }
    },
    components: { Protocol, Vmcmd, qgawrite },//Protocol
    inject: ['detailParent'],
    data() {
        return {
            modal: false,
            currentTab: 'qgawrite',
            tabs: {
                // linkCheck: {
                //     label: '连通性校验',
                //     component: 'LinkCheck',
                // },
                qgawrite: {
                    label:'文件写入',
                    component: 'qgawrite',
                },
                ret: {
                    label: '数据通道',
                    component: 'Protocol',
                },
                vmcmd: {
                    label: '执行命令',
                    component: 'Vmcmd',
                },
                // flow:{
                //     label: '流量展示',
                //     component:'TrafficRetrieval'
                // }
            },
        };
    },
    computed: {
        ...mapState('user', {
          'USER_ID':state => state.userId,
          'isRootDesigner':state => state.isRootDesigner
      }),
    },
    methods: {
        changeTab(val) {
            this.currentTab = val;
        },
    },
};
</script>
<style scoped>
.environ-tab /deep/ .ivu-tabs-bar {
    margin-bottom: 0;
    padding: 0;
}
.environ-tab /deep/ .ivu-tabs-content .ivu-tabs-tabpane {
    /* padding: 10px 16px; */
    padding: 0px!important;
}
.environ-tab /deep/ .ivu-tabs-nav .ivu-tabs-tab {
    padding: 11px 16px;
}
.environ-tab /deep/ .search-table {
    padding: 0;
}
</style>
